import { Button, ConfigProvider, Drawer, Flex, Form, Input, Layout, Space, Switch, Typography, theme, Select, message } from 'antd';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAppContext } from '../context/AppContext';
import { PlusSquareOutlined, CloseOutlined } from '@ant-design/icons';
import { types } from '../../wailsjs/go/models';
import { TestClient } from '../../wailsjs/go/service/Service';

const { Title, Text } = Typography;
const ClusterPage: React.FC = () => {
    const [form] = Form.useForm<types.Connect>()
    const { t } = useTranslation();
    const { flexNum, config, handleChange } = useAppContext();
    // const { conn, setConn } = useState(types.Connect);
    // 控制添加窗口
    const [visible, setVisible] = useState(false);
    const addConnClick = async () => {
        setVisible(true);
    }
    const [testConnectLoading, SetTConnectLoading] = useState(false)
    // 测试连接
    const testConnClick = async () => {
        const values = await form.validateFields();
        if (values.name != null && values.bootstrapServers != null) {
            SetTConnectLoading(true)
            try {
                const res = await TestClient(values.name, values)
                if (res.err !== "") {
                    message.error(t('message:connectErr') + ":" + res.err)
                } else {
                    message.success(t('message:connectSuccess'))
                }
            } catch (e: any) {
                message.error(e)
            }
            SetTConnectLoading(false)
        } else {
            message.error(t('message.mustFill'))
        }
    }
    // 保存节点
    const saveNode = async () => { }
    // 选择文件处理函数
    const handleSelectFile = (field: keyof types.Connect, extensions: string) => {

    }
    // 清除文件字段
    const clearFileField = (field: keyof types.Connect) => {
        form.setFieldsValue({ [field]: '' })
    }
    // SASL机制选项
    const saslMechanismOptions = [
        { value: 'PLAIN', label: 'PLAIN' },
        { value: 'SCRAM-SHA-256', label: 'SCRAM-SHA-256' },
        { value: 'SCRAM-SHA-512', label: 'SCRAM-SHA-512' },
    ];
    return (
        <>
            <Flex vertical style={{ marginLeft: flexNum + 'px' }}>
                {/* <div style={{ flex: 1, marginLeft: flexNum + "px" }}> */}
                <Flex align='center' style={{}}>
                    <h2>{t('conn:title')} </h2>
                    <Text style={{ marginLeft: '10px' }}>{t('common:count')}:{config?.connects.length}</Text>
                    <Button
                        type="primary"
                        onClick={addConnClick}
                        icon={<PlusSquareOutlined />}
                        style={{
                            marginLeft: '10px',
                        }}
                    >{t('conn:add')}</Button>
                </Flex>
                {/* </div> */}
            </Flex >
            <Drawer
                open={visible}
                placement="right"
                width="60%"
                onClose={() => setVisible(false)}
                footer={
                    <Space style={{ width: "100%", justifyContent: "flex-end" }}>
                        <Button
                            type="primary"
                            onClick={testConnClick}
                            loading={testConnectLoading}
                        >{t('conn:test')}</Button>
                        <Button onClick={() => setVisible(false)}>{t('common:cancel')}</Button>
                        <Button type="primary" onClick={saveNode}>{t('common:save')}</Button>
                    </Space>
                }
            >
                <Form
                    form={form}
                    layout='vertical'
                    initialValues={{
                        tls: 'disable',
                        skipTLSVerify: 'false',
                        sasl: 'disable'
                    }}
                >
                    <Form.Item
                        name="name"
                        label={t('common:name')}
                        rules={[{ required: true, message: t('conn:please_add_name') }]}
                    >
                        <Input placeholder={t('conn:input_name')} />
                    </Form.Item>
                    <Form.Item
                        name="bootstrapServers"
                        label={t('conn:bootstrap_servers')}
                        rules={[{ required: true, message: t('conn:please_add_link') }]}
                    >
                        <Input placeholder="127.0.0.1:9092,127.0.0.1:9093" />
                    </Form.Item>
                    <div style={{ marginBottom: 16, color: '#666' }}>
                        {t('conn:tip')}
                    </div>
                    <Form.Item
                        name="tls"
                        label={t('conn:tls')}
                        valuePropName='checked'
                    >
                        <Switch
                            checkedChildren="enable"
                            unCheckedChildren='disable'
                        />
                    </Form.Item>
                    <Form.Item
                        name="skipTLSVerify"
                        label={t('conn:skipTLSVerify')}
                        valuePropName="checked"
                    >
                        <Switch
                            checkedChildren="true"
                            unCheckedChildren="false"
                        />
                    </Form.Item>
                    <Form.Item label="TLS Cert File" name="tlsCertFile">
                        <>
                            <Flex vertical gap="small" align="flex-start">
                                <Button onClick={() => handleSelectFile('tlsCertFile', '*.crt;*.pem;*.cer;*.der')}>
                                    .crt/pem/cer/der
                                </Button>
                                {form.getFieldValue('tlsCertFile') && (
                                    <Flex align="center" gap="small">
                                        <span style={{ color: '#999' }}>
                                            {form.getFieldValue('tlsCertFile')}
                                        </span>
                                        <Button
                                            size="small"
                                            icon={<CloseOutlined />}
                                            onClick={() => clearFileField('tlsCertFile')}
                                        />
                                    </Flex>
                                )}
                            </Flex>
                        </>
                    </Form.Item>
                    <Form.Item label="TLS Key File" name="tlsKeyFile">
                        <>
                            <Flex vertical gap="small" align="tlsKeyFile">
                                <Button onClick={() => handleSelectFile('tlsKeyFile', '*.key;*.pem;*.der')}>.key/pem/der</Button>
                                {form.getFieldValue('tlsKeyFile') && (
                                    <Flex align="center" gap="small">
                                        <span style={{ color: '#999' }}>
                                            {form.getFieldValue('tlsKeyFile')}
                                        </span>
                                        <Button size="small" icon={<CloseOutlined />} onClick={() => clearFileField('tlsKeyFile')} />
                                    </Flex>
                                )}
                            </Flex>
                        </>
                    </Form.Item>
                    <Form.Item label="TLS CA File" name="tlsCaFile">
                        <>
                            <Flex vertical gap="small" align="flex-start">
                                <Button onClick={() => handleSelectFile('tlsCaFile', '*.crt;*.pem;*.cer;*.der')}>
                                    .crt/pem/cer/der
                                </Button>
                                {form.getFieldError('tlsCaFile') && (
                                    <Flex align='center' gap='small'>
                                        <span style={{ color: '#999' }}>
                                            {form.getFieldValue('tlsCaFile')}
                                        </span>
                                        <Button size="small" icon={<CloseOutlined />} onClick={() => clearFileField('tlsCaFile')} />
                                    </Flex>
                                )}
                            </Flex>
                        </>
                    </Form.Item>
                    <Form.Item
                        name="sasl"
                        label={t('conn:use_sasl')}
                        valuePropName='checked'
                    >
                        <Switch checkedChildren='enable' unCheckedChildren='disable' />
                    </Form.Item>
                    <Form.Item name="saslMechanism" label={t('conn:sasl_mechanism')}>
                        <Select
                            placeholder={t('common.check')}
                            options={saslMechanismOptions}
                            allowClear
                            style={{ width: 200 }}
                        />
                    </Form.Item>
                    <Form.Item name="saslUser" label={t('conn.sasl_user')}>
                        <Input placeholder={t('conn.sasl_user')} />
                    </Form.Item>
                    <Form.Item
                        name="saslPwd"
                        label={t('conn.sasl_pwd')}
                    >
                        <Input.Password placeholder={t('conn.sasl_pwd')} />
                    </Form.Item>
                    <Form.Item label={t('conn:kerberos_user_keytab')} name="kerberosUserKeytab">
                        <>
                            <Flex vertical gap="small" align="flex-start">
                                <Button onClick={() => handleSelectFile('kerberosUserKeytab', '')}>
                                    keytab
                                </Button>
                                {form.getFieldValue('kerberosUserKeytab') && (
                                    <Flex align='center' gap="small">
                                        <span style={{ color: "#999" }}>
                                            {form.getFieldValue('kerberosUserKeytab')}
                                        </span>
                                        <Button
                                            size="small"
                                            icon={<CloseOutlined />}
                                            onClick={() => clearFileField('kerberosUserKeytab')}
                                        ></Button>
                                    </Flex>
                                )}
                            </Flex>
                        </>
                    </Form.Item>
                    <Form.Item label={t('conn:kerberos_krb5_conf')} name="kerberosKrb5Conf">
                        <>
                            <Flex vertical gap="small" align='flex-start'>
                                <Button onClick={() => handleSelectFile('kerberosKrb5Conf', '')}>krb5_conf</Button>
                                {form.getFieldValue('kerberosKrb5Conf') && (
                                    <Flex align="center" gap="small">
                                        <span style={{ color: '#999' }}>
                                            {form.getFieldValue('kerberosKrb5Conf')}
                                        </span>
                                        <Button size="small" icon={<CloseOutlined />} onClick={() => clearFileField('kerberosKrb5Conf')} />
                                    </Flex>
                                )}
                            </Flex>
                        </>
                    </Form.Item>
                    <Form.Item
                        name="KerberosUser"
                        label={t('conn.Kerberos_user')}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="KerberosRealm"
                        label={t('conn.Kerberos_realm')}
                    >
                        <Input />saveNode
                    </Form.Item>

                    <Form.Item
                        name="kerberosServiceName"
                        label={t('conn.kerberos_service_name')}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Drawer>
        </>
    );
};

export default ClusterPage;